Skip to content

These snippets were built to supercharge my workflow in the most seamless manner possible.

License

Notifications You must be signed in to change notification settings

shika358/vue-vscode-snippets

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue VSCode Snippets

vue-snippet-hero

Description

These snippets were built to supercharge my workflow in the most seamless manner possible.

This repo was built particularly for real world use. It doesn't catalogue the API definitions, and it's not a kitchen sink approach. Rather, it focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, have to keep looking up, or forget to consider while developing that I make more use of when they're at my fingertips.

Current version: Vue2

SnippetDemo

Installation

Either

  • click the extensions button (lowest square icon in the editor), and type in Vue VSCode Snippets, select the one by sdras

or

ext install Vue VSCode Snippets

You can enable tab completion (recommended) by opening Code > Preferences > Settings (on a Mac) and applying "editor.tabCompletion": true to your personal settings

Snippets

Script

Snippet Purpose
vbase Single file component base
vdata Component data as a function
vmethod Vue method
vcomputed Vue computed property
vwatcher Vue watcher with new and old value args
vprops Props with type and default
vimport Import one component into another
vimport-c Import one component into another within the export statement
vimport-export Import one component into another and use it within the export statement
vfilter Vue filter
vmixin Create a Vue Mixin
vmixin-use Bring a mixin into a component to use
vc-direct Vue create a custom directive
vimport-lib Import a library
vimport-gsap Import GreenSock with Timeline and Eases
vanimhook-js Using the Transition component JS hooks in methods

Template

Snippet Purpose
vfor v-for directive
vmodel Semantic v-model directive
vmodel-num Semantic v-model number directive
von v-on click handler with arguments
vel-props Component element with props
vsrc Image src binding
vstyle Inline style binding
vstyle-obj Inline style binding with objects
vclass Class binding
vclass-obj Class binding with objects
vclass-obj-mult Multiple conditional class bindings
vanim Transition component with JS hooks

Vuex

Snippet Purpose
vstore Base for Vuex store.js
vgetters Vuex Getter
vmutation Vuex Mutation
vaction Vuex Action
vstore-import Import vuex store into main.js

Extra (plaintext)

Snippet Purpose
gitignore .gitignore file presets
vinc incrementer
vdec decrementer

Contributing

This is an open source project open to anyone. Contributions are welcome :github

About

These snippets were built to supercharge my workflow in the most seamless manner possible.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%